/*  fonts */
@font-face {
  font-family: Nunito-Regular;
  src: url(fonts/Nunito-Regular.ttf);
}
@font-face {
  font-family: Nunito-Bold;
  src: url(fonts/Nunito-Bold.ttf);
}
@font-face {
  font-family: Montserrat-Bold;
  src: url(fonts/Montserrat-Bold.ttf);
}

body {
  background-color: white;
  font-family: nav-arrow, Nunito-regular, Arial, NotoSansCHI, NotoSansJP, sans-serif;
  margin: 0;
}
body button {font-family: Nunito-Regular, Arial, sans-serif;}
h1, h2, h3 {font-family: Montserrat-Bold, Arial, sans-serif;}
h4, h5, h6 {font-family: Montserrat-Bold, Arial, sans-serif;}
b {font-family: Nunito-Bold, Arial, sans-serif;}


img {
  -webkit-user-drag: none; /* Chrome, Safari, Edge */
}


a{color: inherit; text-decoration: none;
}
.linkhover:hover{
  opacity: 80%;
}
.btn{
  background-color: white;
  color: black;
  border-radius: 3px;
  padding: 20px;
  font-family: Montserrat-Bold;
}


.section{
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items:center;
  justify-content: center;
  padding: 50px 50px;
}


/* header */
#header{
  display: block;
  background-color: black;
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 1;
}
.header-block{
  display: flex;
  padding: 15px 0px;
  text-align: center;
  justify-content: center;
}
#headerlogo{
  display: block;
  width: fit-content;
  cursor: pointer;
}
#headerlogo img{
  width: 80px;
}


/* cover */
#hero{
  background-color: #a87332;
}
#heroimg{
  width: 30%;
}

#announcementSec{
  background-color: black;
  color: white;
  padding: 50px 0px;
}

#gallery{
  background-color: #cccccc;
}
.galleryContainer{
  display: grid; 
  grid-template-columns: auto auto auto;
  gap: 10px;
  padding: 5vw;
}
.galleryThumbnail{
	transition: 0.2s;
	outline: 1px solid #ddd;
	max-width: 100%;
  border-radius: 20px;
}
.galleryThumbnail:hover{
	filter: brightness(95%);
	transform: scale(1.02);
}


#SystemInfoSec{
  background-color: #a87332;
}

#PermissionInfoSec{
  background-color: white;
}

#LogSec{
  background-color: #cccccc;
}

#PrivacyInfoSec{
  background-color: black;
  color: white;
}

#credit{
  background-color: white;
}


footer {
  width: 100%;
  display: block;
  text-align: center;
  font-size: xx-small;
  padding: 20px 0px;
  background-color: black;
  color: white;
}